<template>
    <!-- 按钮 -->
    <view :class="['m-button','margin-auto','text-center','anim','round','shadow-warp','mBtn',btnClass?btnClass:'rotate-btn',rotate?'rotate':'no-rotate']"
        @click="onClick">
        <view class="spin" v-if="rotate">
            <text class="icon round cuIcon-loading1"></text>
        </view>
        <text class="text" v-else>
            {{ text }}
            <slot ></slot>
        </text>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        props: {
            //确认按钮
            text: {
                type: String,
                default: "",
            },
            //选择状态
            rotate: {
                type: [Boolean, String],
                default: false,
            },
            //背景类
            btnClass: {
                type: String,
                default: "",
            },
            //高度 rpx
            height: {
                type: [Number, String],
                default: 80,
            },
        },
        methods: {
            onClick() {
                this.$emit('click');
            }
        }
    }
</script>
<style scoped lang="scss">
	@import "@/color-ui/main.css";
	.margin-auto{
		margin: auto;
	}
    .mBtn{
         font-size: 36rpx;
         overflow:hidden;
         line-height: 80rpx;
         .text{
             font-size: 30rpx;
             width: auto;
         }
    }
    .rotate,
    .no-rotate {
        /* :style="'height:'+ height +'rpx;'+ (rotate ?'width:'+ height +'rpx;':'width:100%')" */
        height: 80rpx;
    }

    .rotate {
        width: 80rpx;
    }

    .no-rotate {
        width: 100%
    }

    .spin {
        animation: cuIcon-spin 2s infinite linear;
    }

    .anim {
        -webkit-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
        -moz-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
        -ms-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
        -o-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
        transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
    }
</style>
